<template>
  <v-chart :force-fit="true" :height="405" :data="sourceData" :scale="pieScale">
    <v-tooltip :showTitle="false" dataKey="stateDesc*percent" />
    <v-axis />
    <!-- position="right" :offsetX="-140" -->
    <v-legend dataKey="stateDesc" position="bottom-center"/>
    <v-pie position="count" color="stateDesc" :vStyle="pieStyle" />
    <v-coord type="theta" />
  </v-chart>
</template>

<script>
const DataSet = require('@antv/data-set')

const pieScale = [{
  dataKey: 'count',
  min: 0,
  formatter: count => (`${count}个`)
}]

const pieStyle = {
  stroke: '#fff',
  lineWidth: 1
}

export default {
  name: 'InstancePie',
  props: {
    pieData: {
      type: Array,
      required: true
    }
  },
  created () {
    this.pieScale = pieScale
    this.pieStyle = pieStyle
  },
  computed: {
    sourceData () {
      const dv = new DataSet.View().source(this.pieData)
      // const dv = new DataSet.View().source(this.pieData)
      dv.transform({
        type: 'percent',
        field: 'count',
        dimension: 'stateDesc',
        as: 'percent'
      })
      return dv.rows
    }
  }
}
</script>
